<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>菜单管理</title>
    <%--<link rel="stylesheet" href="${pageContext.request.contextPath}/static/libs/layui2.2.5/css/layui.css">--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/libs/layui2.2.5/css/layui-xtree.css">
    <style type="text/css">
    .layui-container {
        width: 100%;
    }
    .layui-table-cell .layui-form-checkbox {
        top: 6px;
    }
</style>
</head>
<body class="body">

<div class="layui-container" style="border:1px solid #eee;height:520px">
<div class="layui-row layui-col-space30">
<div class="layui-col-md4">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>系统应用列表</legend>
    </fieldset>
    <ul id="applist"></ul>
</div>
<div id="menumanage" class="layui-col-md8">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>运维支持系统 菜单列表</legend>
    </fieldset>
    <form class="layui-form" action="" style="height: 450px;overflow-x:hidden;overflow-y:auto">
        <div id="menulist" style="margin:10px;"></div>
    </form>
</div>
</div>
</div>
<div style="position:absolute; bottom: 20px; left: 600px">
    <button id="correlatemenu" class="layui-btn">提 交</button>
    <button type="reset" class="layui-btn layui-btn-primary">重 置</button>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui2.2.5/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui-xtree.js"></script>
<script type="text/javascript">
    var layIndex = null,tableIns,appId='${domainId}',parentMenuId = '0',menuId = null,xtree_menu;
    var $, layer, table,form;

    /**
     * 获取应用列表
     */
    function appListLoad() {
        $.ajax({
            type:'get',
            url:'${pageContext.request.contextPath}/sys/app/applist',
            contentType:'application/json;charset=utf-8',
            success:function (data) {
                treeInit(data);
            },
            error:function (error) {
                console.log(error);
            }
        });
    }

    function menuInit() {
        xtree_menu = new layuiXtree({
            elem: 'menulist'
            , form: form
            , data: "${pageContext.request.contextPath}/sys/menu/menutree?roleid=${roleId}&appid=" + appId
            , isopen: true
            , color: "#000"
            , icon: {
                open: "&#xe61a;"
                , close: "&#xe602;"
                , end: ""
            }
//            , click: function (data) {}
        });
    }

    function treeInit(AllList) {
        $('#applist').empty();
        var treeArray = [];
        if(AllList != null && AllList.length > 0){
            for(var i = 0, len = AllList.length;i <len;i++){
                treeArray.push({
                    id: AllList[i]['appId'],
                    name:AllList[i]['appName']
                })
            }
        }

        // 初始化应用列表
        var treeData = {
            elem: '#applist'
            ,nodes:[{
                id:'0'
                , name: '系统根节点'
                , spread:true
                , children: [{
                    id:'1'
                    , name:'基础共享系统'
                    , spread:true
                    , children:[{
                        id:'${domainId}'
                        , name:'运维支持系统'
                    }]
                },{
                    id:'2'
                    , name:'通用系统'
                    , spread:true
                    , children:treeArray
                }]
            }]
            ,click: function(node){
                appId = node.id;

                if(appId != '0'  && appId != '1' && appId != '2'){
                    parentMenuId = '0';
                    $("#menumanage legend").text(node.name + ' 菜单列表');

                    xtree_menu.render();
                }else {
                    parentMenuId = '-1';
                    $("#menumanage legend").text('菜单列表');
                }
                menuInit();
            }
        };
        layui.tree(treeData);
    }


    /**
     * 列表初始化
     */
    layui.use(['table','layer','form','tree'], function(){
        $ = layui.jquery
        , table = layui.table
        , layer = layui.layer
        , form = layui.form;

        //初始化应用列表
        appListLoad();

        menuInit();
        
        $("#correlatemenu").click(function () {
            var data = xtree_menu.GetChecked(),selectedMenus = [],parentNode,nodeValue,parentValue;
            for(var i = 0,len = data.length;i < len;i++){
                nodeValue = data[i].value;
                if(nodeValue != "0"){
                    if($.inArray(nodeValue,selectedMenus) < 0){
                        selectedMenus.push(nodeValue);
                    }
                    parentNode = xtree_menu.GetParent(nodeValue);
                    if(parentNode != null && parentNode.value != "0"){
                        parentValue = parentNode.value;
                        if($.inArray(parentValue,selectedMenus) < 0){
                            selectedMenus.push(parentValue);
                        }

                    }
                }
            }
            $.ajax({
                type:'post',
                dataType:'json',
                url:'${pageContext.request.contextPath}/sys/role/correlatemenu',
                contentType : "application/json;charset=utf-8",
                data:JSON.stringify({
                    roleId:'${roleId}',
                    appId:appId,
                    menuIds:selectedMenus
                }),
                success:function (data) {
                    if(data != null && data.hasOwnProperty('status') && data.status == 'OK'){
                        layer.msg('菜单绑定成功', {icon: 6,anim: 6});
                    }else {
                        layer.msg('菜单绑定失败', {icon: 5,anim: 6});
                    }
                },
                error:function (error) {
                    console.log(error);
                    layer.msg('菜单绑定失败', {icon: 5,anim: 6});
                }
            });
        });
    });
</script>
</body>
</html>
